'use client'

import { defaultLocale, getDictionary } from '@/lib/i18n'
import { Button, Divider, Flex, Space } from 'antd'
import { useObserver } from 'mobx-react-lite'
import { useResponse } from '@/lib/media'
import { useWorkerHandler } from '@/lib/engines/transform.ts'
import style from './index.module.scss'
import { Logo } from '@/components/picsmaller/Logo'
import { gstate } from '@/app/global'
import { homeState } from '@/states/home'
import { MenuOutlined } from '@ant-design/icons'
import { Compare } from '@/components/picsmaller/Compare'
import { UploadCard } from '@/components/picsmaller/UploadCard'
import { RightOption } from './RightOption'
import { LeftContent } from './LeftContent'
import { useEffect } from 'react';

export default function PicSmaller({
	params: { lang },
}: {
	params: { lang: string }
}) {
	// const langName = (lang && lang[0]) || defaultLocale;
	let langName =
		lang && lang[0] && lang[0] !== 'index' ? lang[0] : defaultLocale

	const initLocale = async () => {
		gstate.locale = await getDictionary(langName)
		console.log(gstate.locale, 123123)
	}

	useEffect(() => {
		initLocale()
	}, [])

	const { isPC } = useResponse()

	useWorkerHandler()

	// Main content switch
	let mainContent = <UploadCard />
	if (homeState.list.size > 0) {
		mainContent = (
			<>
				<LeftContent />
				<RightOption />
			</>
		)
	}

	return useObserver(() => (
		<div className={style.container}>
			{/* header */}
			<Flex align="center" justify="space-between" className={style.header}>
				<div>
					<Logo title="PicSmaller-PicSmaller-PicSmaller" />
				</div>
				<Space>
					{/* If non-PC is determined, the menu button will be displayed */}
					{!isPC && homeState.list.size > 0 && (
						<>
							<Divider type="vertical" style={{ background: '#dfdfdf' }} />
							<Button
								icon={<MenuOutlined />}
								onClick={() => {
									homeState.showOption = !homeState.showOption
								}}
							/>
						</>
					)}
				</Space>
			</Flex>

			{/* body */}
			<Flex align="stretch" className={style.main}>
				{mainContent}
			</Flex>

			{/* Compare */}
			{homeState.compareId !== null && <Compare />}
		</div>
	))
}
